<template>
    <div class="shop-car-numbox-box-container">
        <div class="mui-numbox" data-numbox-min="1" :data-numbox-max="999">
            <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
            <input id="test" class="mui-input-numbox" type="number" :value="count" @change="changeCount" ref="input_value">
            <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
        </div>
    </div>
</template>
<style lang="scss" scoped>
    .shop-car-numbox-box-container{
        display: inline-block;
    }
</style>
<script>
import mui from '../../lib/mui/js/mui.min.js'
export default {
    data(){
        return {}
    },
    props: ['count', 'max', 'id'],
    methods: {
        changeCount(){
            this.$store.commit('setToCar', {id: this.id, count: this.$refs.input_value.value})
            this.$emit('changeTotalInfo')
        },
    },
    mounted(){
        mui(".mui-numbox")
            .numbox()
            .setOption('max', this.max)
    }
}
</script>
